<!DOCTYPE html>
<html lang="zh-CN" class="scrollbar">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="../css/shopcart.css">
		
		<link rel="stylesheet" href="../css/comm_top.css">
		
		
		<link rel="stylesheet" href="../css/makeup.css">
		<link rel="shortcut icon" href="../imgs/favicon.ico" type="image/x-icon">
		<script src="../js/iconfont.js"></script>
		<script src="../js/jQuery3.6.0.js"></script>
		
		
		<style>
			[v-cloak] {
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		
		
		
		
			<!-- 头部 -->
			<div class="all-top">
				<div class="w1200">
					<!-- 左边 -->
					<div class="fl">
						<div class="map fl">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-icon-map"></use>
							</svg>
							<span>北京市</span>
							<div class="dingwei">
								<div class="ding-title">
									<a href="">苏州市</a>
									<a href="">北京市</a>
									<a href="">天津市</a>
									<a href="">上海市</a>
								</div>
							</div>
						</div>
		
						<div class="top-fl-tex">
							<a href="login.html" class="red">请登录</a>
							<a href="register.html">免费注册</a>
						</div>
					</div>
					<ul class="fr">
						<li>
							<a href="">我的订单</a>
						</li>
						<li class="spacer">|</li>
						<li>
							<a href="">我的浏览</a>
						</li>
						<li class="spacer">|</li>
						<li>
							<a href="">我的收藏</a>
						</li>
						<li class="spacer">|</li>
						<li>
							<a href="">客户服务</a>
						</li>
						<li class="spacer">|</li>
						<li>
							<div>网站导航
								<i></i>
							</div>
							<div class="daohang">
								<dl class="fore1 fl">
									<dt>特色主题</dt>
									<dd class="fl">
										<a href="">男装女装</a>
										<a href="">鞋靴箱包</a>
									</dd>
								</dl>
								<dl class="fore2 fl">
									<dt>促销活动</dt>
									<dd class="fl">
										<a href="">拍卖活动</a>
										<a href="">共创商品</a>
										<a href="">积分商城</a>
										<a href="">CMS频道</a>
										
									</dd>
								</dl>
							</div>
						</li>
		
					</ul>
				</div>
			</div>
			<!-- 搜索头部 -->
			<div class="header">
				<div class="w1200 w">
					<div class="logo fl">
						<a href="../index.html">
							<img src="https://x.dscmall.cn/storage/images/common/shop_logo.gif" alt="">
						</a>
					</div>
					<div class="header-search fl">
						<form action="">
							<input type="text" value="Five Plus" class="search-con">
							<button type="submit" class="button-goods">搜商品</button>
							<button type="submit" class="button-store">搜店铺</button>
							<div class="keyword fl">
								<a href="#">周大福</a>
								<a href="#">内衣</a>
								<a href="#">Five Plus</a>
								<a href="#">手机</a>
							</div>
						</form>
					</div>
					
				</div>
			</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<main id="shopcart" v-cloak>
			<div class="shopcart-body" v-if='isShow'>
				<section class="cart-main">
					<header class="head">
						<nav class="cart-nav flex-vc">
							<div class="check-all row-5">
								<div class="check-wrapper"> <a href="javascript:;" class="check-ctrl"
										:class={checked:isSelectedAll} @click='checkAll'> <i class="icon-check">
											<span></span> </i> <span class="name-check">全选</span> </a> </div>
							</div>
							<div class="singal-price row-2"> 单价（元） </div>
							<div class="number row-2"> 数量 </div>
							<div class="small-total row-2"> 小计（元） </div>
							<div class="edit row-1" @click='toggleEdit'> <span v-text='isEdit ? "编辑" : "完成"'></span>
							</div>
						</nav>
					</header>
					<section class="body">
						<div class="area" v-for="(kind , i) of goodsInfo" :key="kind.key">
							<div class="area-category">
								<div class="check-wrapper"> <a href="javascript:;" class="check-ctrl"
										:class={checked:kind.isSelected} @click='checkCategory(kind)'> <i
											class="icon-check"> <span></span> </i> <span
											class="name-check">{{kind.category}}</span> </a> </div>
							</div>
							<ul class="area-list">
								<li class="item flex-wrap" v-for="(item , index) of kind.goods" :key="item.name">
									<div class="option flex-vc row-5">
										<div class="check-wrapper"> <a href="javascript:;" class="check-ctrl"
												:class={checked:item.isSelected} @click='checkSingal(kind ,item)'> <i
													class="icon-check"> <span></span> </i> </a> </div>
										<div class="img"> <a href="javascript:;"> <img :src=item.imgUrl alt=""> </a>
										</div>
										<div class="good-info"> <a href="javascript:;">
												<h5 class="good-name">{{item.name}}</h5>
												<p class="good-desc">{{item.tips}}</p>
											</a> </div>
									</div>
									<div class="singal-price row-2 flex-hvc"> {{item.price | polish}} </div>
									<div class="number row-2 flex-hvc">
										<div class="flex-wrap input-box">
											<button class="minus" :class="{'forbid':item.isBanMinus}"
												@click="minus(item)">-</button>
											<input class="num-input" type="text" :value=item.selectNum
												@keyup="inputVerify(item,$event)">
											<button class="plus" :class="{'forbid':item.isBanPlus}"
												@click="plus(item)">+</button>
											<em class="upper-limit">限购<span>{{item.upperLimit}}</span>件</em>
										</div>
									</div>
									<div class="small-total row-2 flex-hvc"> {{item.price * item.selectNum | polish()}}
									</div>
									<div class="edit row-1 flex-hvc"> <i class="edit-icon" v-show="isEdit">--</i> <i
											class="close-btn" v-show="!isEdit" @click="alertDelConfirm(kind,index)">
											<span class="shift-left"></span> <span class="shift-right"></span> </i>
									</div>
								</li>
							</ul>
						</div>
					</section>
				</section>
				<footer class="cart-foot-wrap">
					<div class="foot flex-vc">
						<div class="foot-left flex-vc">
							<div class="check-wrapper"> <a href="javascript:;" class="check-ctrl"
									:class={checked:isSelectedAll} @click='checkAll'> <i class="icon-check">
										<span></span> </i> <span class="name-check">全选</span> </a> </div>
							<div class="desc"> <span class="del-selected" @click="alertDelConfirm">删除选中商品</span> <em
									class="num-desc"> 共有 <span class="sum"> {{sum}} </span> 件商品，已选择 <span class="sumed">
										{{sumed}} </span> 件 </em> </div>
						</div>
						<div class="foot-right flex-vc">
							<div class="total-price"> 合计： <span class="totaled"> {{totaled | polish}} </span> </div>
							<a href="javascript:;" class="order flex-hvc" :class='{"none-order":isNoOrder}'> 去结算 </a>
						</div>
					</div>
				</footer>
				<del-confirm ref="delConfirm" @del-goods="deleteOk"></del-confirm>
			</div>
			<div class="shopcart-null flex-hvc" v-else> <i class="shopcart-icon"></i>
				<div class="tips">
					<h3 class="tips-substitle"> 购物车内还没有商品，赶紧去选购吧~~ </h3>
					<a href="javascript:;" class="back-home flex-hvc"> 返回商城首页 </a>
				</div>
			</div>
		</main>
		<template id="del-confirm">
			<div>
				<aside class="mask-layer" :class='{"show":isAlert}'>
					<section class="confirm-box">
						<h3 class="confirm-title flex-hvc"> <span>{{confirmInfo.title}}</span> <i class="close-btn"
								@click="closeDelConfirm"> <span class="shift-left"></span> <span
									class="shift-right"></span> </i> </h3>
						<p class="confirm-con flex-hvc"> {{confirmInfo.content}} </p>
						<div class="confirm-ctrl flex-hc"> <a href="javascript:;" class="delete"
								:class='{"show":confirmInfo.del.isShow}' @click="delSure">{{confirmInfo.del.delCon}}</a>
							<a href="javascript:;" class="cancel" @click='closeDelConfirm'>{{confirmInfo.cancelCon}}</a>
						</div>
					</section>
				</aside>
			</div>
		</template>
		
		
		
		<div class="guessWhatYouLike">
			<div class="xian">
				<span style="">猜你喜欢</span>
			</div>
			<div class="clearfix">
				<ul class="clearfixUl">
				</ul>
			</div>
		</div>
		<footer>
			<div id="cbox">
				<div class="ctop">
					<ul id="ctopul">
						<li class="ctopli"><i class="i1"></i><span>七天包换</span></li>
						<li class="ctopli"><i class="i2"></i><span>正品保障</span></li>
						<li class="ctopli"><i class="i3"></i><span>好评如潮</span></li>
						<li class="ctopli"><i class="i4"></i><span>闪电发货</span></li>
						<li class="ctopli"><i class="i5"></i><span>权威荣誉</span></li>
						<li class="ctopli"><i class="i6"></i><span>4001-021-221</span></li>
						<li class="ctopli"><i class="i7"></i><span>咨询客服</span></li>
					</ul>
				</div>
				<div class="cbnt">
					<div class="cbtop">
						<ul>
							<li>新手上路</li>
							<li><a href="#">售后流程</a></li>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">订阅方式</a></li>
						</ul>
						<ul>
							<li>配送与支付</li>
							<li><a href="#">货到付款区域</a></li>
							<li><a href="#">配送支付智能查询</a></li>
							<li><a href="#">支付方式说明</a></li>
						</ul>
						<ul>
							<li>服务保证</li>
							<li><a href="#">退换货原则</a></li>
							<li><a href="#">售后服务保证</a></li>
							<li><a href="#">产品质量保证</a></li>
						</ul>
						<ul>
							<li>联系我们</li>
							<li><a href="#">网站故障报告</a></li>
							<li><a href="#">选机咨询</a></li>
							<li><a href="#">投诉与建议</a></li>
						</ul>
						<ul>
							<li>会员中心</li>
							<li><a href="#">资金管理</a></li>
							<li><a href="#">我的收藏</a></li>
							<li><a href="#">我的订单</a></li>
						</ul>
						<img src="../imgs/01_comm_font1.jpg" style="width: 100px;" height="100px" alt="">
						<img src="../imgs/01_comm_font2.jpg" alt="">
					</div>
					<div class="cnbnt">
						<ul>
							<li><a href="#">首页</a></li>
							<li><a href="#">隐私保护</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">免责条款</a></li>
							<li><a href="#">公司简介</a></li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">供应商入住</a></li>
							<li><a href="#">意见反馈</a></li>
						</ul>
						<ul>
							<li><a href="#">b2b2c</a></li>
							<li><a href="#">多用户商城系统</a></li>
							<li><a href="#">商城系统</a></li>
							<li><a href="#">ecjia新零售</a></li>
		
						</ul>
						<p>ICP备案证书号:沪ICP备14029880号-5</p>
						<p>版权所有G2005-2021大商创，并保留所有权利。POWERED BY DSCMALL</p>
					</div>
				</div>
				
						
		
		
		
		
		
		<script src="../js/jQuery3.6.0.js"></script>
		<script src="../js/makeupJson.js"></script>
		<script src="../js/makeup.js"></script>
		<script src="https://www.jq22.com/jquery/vue.min.js"></script>
			<script src="../js/indexjson.js"></script>
		<script src="../js/shopcart.js"></script>
		
		
		
		
		
	</body>
</html>
